<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="https://www.sunyuchao.com/static/css/fontawesome4.7.0/css/font-awesome.css">
    <link rel="stylesheet" href="https://www.sunyuchao.com/static/css/animate.css">
    <link href="https://www.sunyuchao.com/static/layui/css/layui.css" rel="stylesheet">
    <link rel="stylesheet" href="https://www.sunyuchao.com/static/css/common.css">
    <script th:src="${iconfontUrl}"></script>
    <title>孙玉超个人博客-微动态</title>
    <style>
        .container{width: 62%;margin: 0 auto;margin-top: 20px;position: relative;}
        .container .motto{padding: 5px;margin:0 auto;margin-bottom: 10px;position: relative;border-bottom: 1px solid #ccc;
            color:#526163;font-weight: bold;font-size: 15px;overflow: hidden;padding-bottom: 10px;}
        .container .motto::after {
            position: absolute;
            left: 0;
            bottom: 0;
            height: 2.5px!important;
            width: 100px;
            background-color: #51aded;
            content: '';
            transition:width 2s;
            -moz-transition:width 2s; /* Firefox 4 */
            -webkit-transition:width 2s; /* Safari and Chrome */
            -o-transition:width 2s; /* Opera */
        }
        .container .say-item li{height: 100px;position: relative;display: none;margin-top: 40px;}
        .container .say-item li .item-img{float: left;width: 100px;}
        .container .say-item li::before{
            content: "";
            width: 0;
            height: 0;
            border-style: solid;
            border-width: 22px 0 22px 30px;
            border-color: transparent transparent transparent #fff;
            position: absolute;
            left: 115px;
            top: 24px;
            transition: all 1s;
        }
        .container .say-item li:hover::before{
            border-color: transparent transparent transparent blueviolet;
        }

        .container .content::before{
            content: "";
            width: 10px;
            height: 1000px;
            background-color: yellowgreen;
            position: absolute;
            left: 45px;
            transition: all 4s;
            z-index: -2;
        }

        .container .say-text{float: right;width: 82%;position: relative;}
        .container .say-text .time-tag{position: absolute;right: 2%;bottom: 10%;line-height: 25px;height: 25px;}
        .container .say-text::after{ content: "";
            width: 10px;
            height: 10px;
            border-radius: 50%;
            position: absolute;
            left: -52px;
            top: 38px;
            background: #ccccce;
            border: 2px solid #fff;
            transition: all 2s;
        }
        .container .say-text:hover::after{
            background: blueviolet;
        }
        #shade{position: absolute;width: 20px;height: 1300px;background-color: rgb(244,244,244);left: 40px;z-index: -1;}
        /*鼠标悬停div修改子元素样式*/
        .container:hover .motto:first-child::after{
            width: 600px;
        }

        /*小屏幕 1366 x 768*/
        @media screen and (max-width: 1366px) {
            .container{
                width: 88%;
            }
        }

    </style>
</head>
<body>
<!--搜索-->
<div th:replace="index :: search"></div>
<!--右下角固定-->
<div th:replace="index :: permanent"></div>

    <div class="top">
        <div class="top-center">
            <div class="top-center-l">
                <img th:src="${logoUrl}">
            </div>
            <div class="top-center-c">
                <ul class="nav">
                    <li><a href="/">首&nbsp;&nbsp;页</a></li>
                    <li><a href="/learning">爱学习</a></li>
                    <li class="nav-this"><a href="#">微动态</a></li>
                    <li th:replace="index :: onlineutils"></li>
                    <li><a href="/aboutme">关于我</a></li>
                    <li><a href="/message">留言板</a></li>
                </ul>
            </div>
            <div th:replace="index :: top-center-r" class="top-center-r"></div>
        </div>
    </div>

    <div class="container">
        <h1 class="motto">
            <span class="f-right">人不可能完美，但从不应该停止对完美的追求。不满足，是人拼搏的原动力</span>
        </h1>
        <div class="content">
            <div id="shade"></div>
            <ul class="say-item">
                <li th:each="note : ${notebookList}">
                    <div class="item-img">
                        <img th:src="${note.imgUrl}" class="radius">
                    </div>
                    <div class="say-text">
                        <textarea disabled class="layui-textarea" placeholder="请输入内容" th:utext="${note.content}"></textarea>
                        <a class="layui-btn layui-btn-normal time-tag" th:text="${#dates.format(note.dateInsert, 'yyyy-MM-dd')}"></a>
                    </div>
                </li>

            </ul>

            <div style="margin: 0 auto;width: 80%;margin-top: 50px;" class="layui-btn-container">
                <a th:href="@{/life(page=${page-1})}" th:class="${page == 1 ? 'layui-btn layui-btn-disabled':'layui-btn'}"> <i class="layui-icon layui-icon-left"></i></a>
                <a th:href="@{/life(page=${num})}" th:class="${num == page ? 'layui-btn layui-btn-normal':'layui-btn'}" th:each="num : ${pageNumList}" th:text="${num}"></a>
                <a th:href="@{/life(page=${page+1})}" th:class="${page == pageTotal ? 'layui-btn layui-btn-disabled':'layui-btn'}"> <i class="layui-icon layui-icon-right"></i></a>
            </div>
        </div>
    </div>
<div class="footer">
    <p><a href="https://beian.miit.gov.cn/">Design by：暮色妖娆丶 备案号：皖ICP备19018192号-1</a></p>
</div>

<script src="https://www.sunyuchao.com/static/layui/layui.js" ></script>
<script src="https://www.sunyuchao.com/static/js/jquery3.3.1.min.js"></script>
<script>
    layui.use(['layer'],function () {});
</script>
<script>
    $("#shade").animate({top:'1200px'},3500);
    /**
     * 依次显示
     * */
    var lis = $(".say-item li");
    var index=0;
    function fadeIn(arr) {
        if(index <= arr.length - 1) {
            $(arr[index]).fadeIn(500,function () {
                index++;
                fadeIn(arr);
            });
        }
    }
    fadeIn(lis);


</script>
<script src="https://www.sunyuchao.com/static/js/heart.js"></script>

<script src="https://www.sunyuchao.com/static/js/common.js"></script>
</body>
</html>